<template>
  <div style="width: 100vw; margin-top: 5vw">
    <!-- view/Form.vue -->
    <el-form
      ref="form"
      :model="form"
      label-width="100px"
      style="width: 90%"
      :rules="rules"
    >
      <el-form-item label="商家名" prop="corporation_name">
        <el-input v-model="form.corporation_name"></el-input>
      </el-form-item>
      <el-form-item label="设计密码" prop="corporation_pwd">
        <el-input v-model="form.corporation_pwd" show-password></el-input>
      </el-form-item>
      <el-form-item label="确定密码" prop="pwd2">
        <el-input v-model="form.pwd2" show-password></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="corporation_phone">
        <el-input v-model="form.corporation_phone"></el-input>
      </el-form-item>
      <el-form-item label="上传凭证" prop="urls">
        <el-upload
          ref="upload"
          class="upload-demo"
          style="width: 100px"
          drag
          action="http://localhost:9000/upload"
          multiple
          :limit="2"
          :on-exceed="handleExceed"
          :on-success="uploadVoucherSuccess"
          :before-upload="beforeVoucherUpload"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            <em>点击上传文件或图片凭证</em>
          </div>
          <div class="el-upload__tip" slot="tip"></div> 
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button  @click="cz">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import AMapLoader from "@amap/amap-jsapi-loader";
import httpApi from '@/http';
export default {
  data() {
    var checkPwd2 = (rule, value, callback) => {
      if (value != this.form.corporation_pwd) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    };
    return {
      form: {
        corporation_name: "",
        corporation_pwd: "",
        pwd2: "",
        corporation_phone: "",
        //保存上传成功的路径1
        voucher1:'',
        voucher2:''
      },
      urls:[],
      // 定义验证规则
      rules: {
        corporation_name: [
          { required: true, message: "用户名必填", trigger: "blur" },
        ],
        corporation_pwd: [
          { required: true, message: "密码必填", trigger: "blur" },
          { pattern: /^\d{6}$/, message: "必须是6位数字", trigger: "blur" },
        ],
        pwd2: [
          { required: true, message: "必填", trigger: "blur" },
          { validator: checkPwd2, trigger: "blur" },
        ],
        corporation_phone: [
          { required: true, message: "必填", trigger: "blur" },
          { pattern: /^1[3-9]\d{9}$/, message: "手机号错误", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 2 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    // 处理上传之前的格式大小验证
    beforeVoucherUpload(file) {
      const isJPG = file.type === 'image/jpeg' || 'application/pdf';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式,文件只能为PDF格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
   
    uploadVoucherSuccess(res, file) {
      // console.log(res,"上传")
      // 将上传成功后的图片访问路径，存入form对象
      this.urls.push( res.data )
      // console.log(this.urls,"数量");
      this.form.voucher1 =this.urls.length === 0 ? null : this.urls[0]
      this.form.voucher2 =this.urls.length === 0 || this.urls.length === 1 ? null : this.urls[1] 
    },
    cz(){
      // 上传清空
      this.$refs['upload'].clearFiles()
      // 将表单重置
      this.$refs['form'].resetFields()
    },
    submit() {
      // console.log(this.form,"表单");
       //提交表单
       this.$refs['form'].validate((valid) => {
          if (valid) {
            // 发送post请求，新增演员
            httpApi.storeApi.registerStore(this.form).then(res =>{
              // console.log('新增演员成功',res);
              if(res.data.code === 200){
                this.$message({
                  message: '恭喜加入成功，请耐心等待来电',
                  type: 'success'
                });
              }else if(res.data.code === 201){
                this.$message({
                  message: '感谢你的支持，请不能重复注册',
                  type: 'warning'
                });
              }
              this.urls = []
              // console.log(this.urls);
              // 上传清空
              this.$refs['upload'].clearFiles()
              // 将表单重置
              this.$refs['form'].resetFields()
            })
          } else {
            // 表单验证失败
            // console.log("验证失败");
            this.$message.error('加入失败，请重新填写申请');
          }
        })
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-upload-dragger {
  width: 65vw;
}
</style>
